<template>
	<view class="container">
		<view class="line">
			<view class="name">当前定位</view>
			<view class="square" @click="ToCity(CityName)"><view class="icon"><image src="/static/address.png" mode="aspectFill" /></view><view class="city">{{CityName}}</view></view>
			<view class="square" @click="ToCity('全国')"><view class="city">全国</view></view>
		</view>
		<view class="line" v-if="Flag==1">
			<view class="name">选择省</view>
			<view class="square" :class="item.ID==ProvinceID?'select':''" v-for="item in ProvinceList" @click="ToProvice(item.ID)"><view class="city">{{item.Name}}</view></view>
		</view>
		<view class="line" v-if="Flag==2">
			<view class="name">选择市</view><view class="back" @click="Back()">返回省</view>
			<view class="square" v-for="item in ProvinceCityList" @click="ToCity(item.Name)"><view class="city">{{item.Name}}</view></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ProvinceList:[],
				CityList:[],
				CityName:'定位中...',
				ProvinceCityList:[],
				ProvinceID:0,
				Lat:0,
				Lng:0,
				Flag:1
			};
		},
		onLoad() {
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				this.Find_Position();
			  }
			});
			this.Find_City();
		},
		methods:{
			ToProvice(ProvinceID){
				this.Flag=2;
				this.ProvinceID=ProvinceID;
				this.InitCityList(ProvinceID);
			},
			ToCity(CityName){
				uni.$emit("SelectCity",CityName);
				uni.setStorageSync("CityName",CityName);
				uni.navigateBack();
			},
			Back(){
				this.Flag=1;
			},
			Find_Position(){
				var data = {};
				data.Act="Find_Position";
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.CityName = json.Data.CityName;				
				});
			},
			Find_City(){
				var data = {};
				data.Act="Find_City";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.ProvinceList = json.Data.ProvinceList;
					this.CityList = json.Data.CityList;					
				});
			},
			InitCityList(ProvinceID){
				var ProvinceCityList=[];
				this.CityList.forEach(item=>{
					if(item.ParentID==ProvinceID){
						ProvinceCityList.push(item);
					}
				});
				this.ProvinceCityList=ProvinceCityList;
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.line{width:100%; min-height:200rpx; padding:20rpx; padding-top:40rpx; background-color: #ffffff; float:left; margin-bottom: 20rpx; position: relative;
			.name{width:auto; height:30rpx; color:#888888; font-size:30rpx; margin-bottom: 20rpx;}
			.back{position: absolute; top:40rpx; right: 20rpx; font-size:30rpx; color:#ff5732;}
			.square{width:auto; height:70rpx; border:1rpx solid #cdcdcd; float:left; margin-right: 20rpx; margin-bottom: 20rpx; padding-left:16rpx; padding-right: 16rpx;
				.icon{width:40rpx; height: 40rpx; margin-top:15rpx; float:left; image{width:100%; height: 100%;}}
				.city{width:auto; height:70rpx; line-height: 70rpx; float:left;}
			}
			.square:active{border:1rpx solid #ff5732; background-color: #ff5732; color:#ffffff;}
			.select{border:1rpx solid #ff5732; background-color: #ff5732; color:#ffffff;}
		}
	}
</style>
